<template>
  <ve-histogram
    :data="chartData"
    :settings="chartSettings"
    :extend="extend"
    :legend-visible="false"
    ref="histogram"
  ></ve-histogram>
</template>

<script>
const echarts = require("echarts");
export default {
  data() {
    this.chartSettings = {};
    this.extend = {
      series: {
        barWidth: 40,
      
        // data: dataShadow,

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "#1268f3", // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: "#08a4fa", // 60% 处的颜色
                },
                {
                  offset: 1,
                  color: "#01ccfe", // 100% 处的颜色
                },
              ],
              false
            ),
          },

        },
        itemStyle: {
          barBorderRadius: 2,
          shadowColor: "rgba(0, 0, 0, 0.25)",
          shadowBlur: 5,
          shadowOffsetX: 5,
          shadowOffsetY: -1,
          color:'#01ccfe'
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: true,
          icon: "none",
          padding: 0,
          itemGap: 0,
          itemWidth: 15,
        },
      },
    };
    return {
      chartData: {
        columns: ["日期", "访问用户"],
        rows: [
          { 日期: "1/1", 访问用户: 1393 },
          { 日期: "1/2", 访问用户: 3530 },
          { 日期: "1/3", 访问用户: 2923 },
          { 日期: "1/4", 访问用户: 1723 },
          { 日期: "1/5", 访问用户: 3792 },
          { 日期: "1/6", 访问用户: 4593 },
          { 日期: "1/6", 访问用户: 459 },
          { 日期: "1/6", 访问用户: 453 },
          { 日期: "1/6", 访问用户: 593 },
          { 日期: "1/6", 访问用户: 493 },
        ],
      },
    };
  },
 
};
</script>